<template>
  <div class="load-container">
    <div class="header-container">请您选择对应店铺类型进行管理</div>
    <div class="center-container">
      <div class="item">
        <div class="item-top">
          <a-badge count="NEW" :offset="[22, 0]">
            <div class="title">钻石店铺2.0</div>
          </a-badge>
        </div>
        <div>
          <ul>
            <li>重构管理系统，操作直观，双平台一铺投放</li>
            <li>全新美学设计，商务质感与视觉体验全面进化</li>
            <li>毫秒极速响应，高并发承载，丝滑运行零报错</li>
          </ul>
          <div class="info">说明：原百搜店铺1.0从此处登录管理</div>
          <div class="submit"><a-button type="primary" @click="ebsLogin">进入店铺</a-button></div>
        </div>
      </div>
      <div class="item">
        <div class="item-top">
          <div class="title">百姓钻石店铺</div>
        </div>

        <div>
          <ul>
            <li>原百姓钻石店铺</li>
            <li>4月1号之前创建，域名含baixing.cn</li>
            <li>如要切换到钻石店铺2.0，需人工搬运</li>
          </ul>
          <div>&nbsp;</div>
          <div v-if="hasPermission([OPERATION])" class="submit">
            <a-button type="primary" @click="bxLogin">存量管理</a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, defineProps } from 'vue'
import { useRouter } from 'vue-router'
import MD5 from 'crypto-js/md5'
import { useMainStore } from '@/store/useMainStore'
import getLoginTokenFn from '@/services/account-management/getLoginToken'
import { hasPermission } from '@/utils/permission'
import { AuthEnum } from '@/core/enums/auth'

const { AGENT, AGENT_BOSS, SALES, OPERATION, ADMIN } = AuthEnum
const props = defineProps({
  loadOption: {
    type: Object
  }
})

const mainStore = useMainStore()
const router = useRouter()
const [, getLoginToken, loading] = getLoginTokenFn()
//百搜登录
const ebsLogin = async () => {
  const { VITE_NEW_SHOP_LINK } = import.meta.env
  const isOrderManager = router.currentRoute.value.name === 'order-manager'
  const params = isOrderManager ? { customerId: props.loadOption.customerId } : {}

  const [err, res] = await getLoginToken(params)
  if (err) {
    console.error('Login failed:', err)
    return
  }
  const url = `${VITE_NEW_SHOP_LINK}?secretKey=${res.data.data}`
  window.open(url)
}
//百姓登录
const bxLogin = async () => {
  let loginMobile = props.loadOption?.mobile
  const isOrderManager = router.currentRoute.value.name === 'order-manager'
  if (!isOrderManager) {
    loginMobile = mainStore.userMobile
  }
  const { VITE_HAOJING_API_SECRET, VITE_HAOJING_HOST } = import.meta.env
  const hash = MD5(`${loginMobile}${VITE_HAOJING_API_SECRET}`).toString()
  const url = `${VITE_HAOJING_HOST}?mobile=${loginMobile}&hash=${hash}`
  window.open(url)
}
</script>
<style lang="scss" scoped>
.load-container {
  background: white;
  min-height: calc(100vh - 120px);
  border-radius: 8px;

  .header-container {
    display: flex;
    justify-content: center;
    font-size: 26px;
    font-weight: bold;
    padding: 60px 0px;
  }

  .center-container {
    display: flex;
    justify-content: center;
  }

  .item {
    margin: 0px 60px;
    width: 22rem;
    height: 100%;
    border: 1px solid #f4f5f5;
    border-radius: 12px;
    box-shadow:
      0 4px 12px -4px rgba(5, 8, 82, 0.04),
      0 10px 30px -8px rgba(5, 8, 82, 0.12);

    .item-top {
      background-color: #5788f8;
      padding: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;

      .title {
        color: white;
        font-weight: 700;
        font-size: 20px;
        line-height: 30px;
      }
    }

    ul {
      margin: 60px 0px;
    }

    li {
      margin: 10px 0px;
    }

    .submit {
      text-align: center;
      margin: 60px 0px;
    }

    .ant-btn {
      width: 120px;
      border: none;
    }

    .info {
      color: red;
      text-align: center;
    }
  }
}
</style>
